<script setup>
import { ref, computed } from 'vue';


defineProps({
    modelValue: {
        type: String,
        default: ''
    },
    label: {
        type: String,
        default: null
    },
    placeholder: {
        type: String,
        default: null
    },
    type: {
        type: String,
        default: 'text'
    },
    readonly: {
        type: Boolean,
        default: false
    }
});

// model: {
//     prop: 'inputVal',
//     event: 'inputEvent'
// },

defineEmits(['update:modelValue', 'blur']);

const hInput = ref()


// const inputVal = computed({
//     get: () => props.modelValue,
//     set: (val) => {
//         emit('update:modelValue', val)
//     }
// })


</script>

<template>
    <label class="flex flex-col md:flex-row md:items-center w-full">
        <div class="w-36 leading-10 md:text-right">{{ label }}</div>
        <div class="flex rounded border w-full overflow-auto">
            <input ref="hInput" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
                class="w-full outline-none p-2" spellcheck="false" :placeholder="placeholder" :type="type"
                :readonly="readonly" @blur="$emit('blur', $event)"/>
            <slot name="right"></slot>
        </div>

    </label>
</template>

<style scoped></style>
